import BaseBarChartComponent from "./base-bar-chart.js";

// 基础柱状图组件 - 继承自基础图表组件
class BasicBarChart extends BaseBarChartComponent {
    constructor() {
        super();
    }

    // 重写：提供柱状图的默认配置
    getDefaultConfig() {
        // 继承父类的基础配置并添加柱状图特有配置
        const parentConfig = super.getDefaultConfig();

        return {
            ...parentConfig,
            // 柱状图特有系列配置
            seriesAttrs: [
                ...parentConfig.seriesAttrs,
                ['series-type_select', 'bar'], // 默认为柱状图类型
                ['series-bar-width_number', 25], // 柱子宽度
                ['series-bar-max-width_number', 50], // 柱子最大宽度
                ['series-bar-min-width_number', 10], // 柱子最小宽度
                ['series-bar-category-gap_number', 20], // 类目间距
                ['series-bar-item-style-color_colorpicker', ''], // 柱子颜色
                ['series-bar-border-radius_number', 0], // 柱子圆角
                ['series-bar-stack_text', ''], // 堆叠名称
                ['series-bar-label-show_radio', false], // 是否显示标签
                ['series-bar-label-position_select', 'top'], // 标签位置
                ['series-bar-label-color_colorpicker', '#333'], // 标签颜色
                ['series-bar-label-fontsize_number', 12], // 标签字体大小
            ]
        };
    }

    // 重写：生成柱状图特有的系列配置
    generateSeries(dataDemo, seriesConfig) {
        const defaultGradients = this.getDefaultGradients();

        // 检查数据是否存在且有内容
        if (!dataDemo || !Array.isArray(dataDemo) || dataDemo.length === 0) {
            // 返回默认空配置（可根据实际需求调整）
            return {
                name: '',
                data: [],
                type: 'bar',
                barWidth: seriesConfig.barWidth || 25,
                barMaxWidth: seriesConfig.barMaxWidth || 50,
                barMinWidth: seriesConfig.barMinWidth || 10,
                barCategoryGap: `${seriesConfig.barCategoryGap || 20}%`,
                stack: seriesConfig.barStack || ''
            };
        }

        // 只取第一条数据
        const item = dataDemo[0];
        // 使用第一条数据的索引（0）获取渐变
        const gradientIndex = 0 % defaultGradients.length;
        const defaultGradient = defaultGradients[gradientIndex];

        const key = Object.keys(item)[0];
        const seriesName = key;
        const dataList = item[key];

        // 构建单个柱状图系列配置（不再返回数组）
        return {
            name: seriesName,
            data: dataList.map(item => item.value),
            type: 'bar', // 固定为柱状图类型
            barWidth: seriesConfig.barWidth || 25,
            barMaxWidth: seriesConfig.barMaxWidth || 50,
            barMinWidth: seriesConfig.barMinWidth || 10,
            barCategoryGap: `${seriesConfig.barCategoryGap || 20}%`,
            stack: seriesConfig.barStack || '',
            itemStyle: {
                color: seriesConfig.barItemStyleColor || defaultGradient.start,
                borderRadius: seriesConfig.barBorderRadius || 0
            },
            // 标签配置
            label: {
                show: seriesConfig.barLabelShow || false,
                position: seriesConfig.barLabelPosition || 'top',
                color: seriesConfig.barLabelColor || '#333',
                fontSize: seriesConfig.barLabelFontsize || 12
            }
        };
    }


    // 重写：柱状图默认数据
    getDefaultData() {
        return [
            {
                "销量": [
                    { "name": "衬衫", "value": 5 },
                    { "name": "羊毛衫", "value": 20 },
                    { "name": "雪纺衫", "value": 36 },
                    { "name": "裤子", "value": 10 },
                    { "name": "高跟鞋", "value": 10 },
                    { "name": "袜子", "value": 20 }
                ]
            }
        ];
    }

    // 重写：处理柱状图特有的属性变化
    handleAttributeChange(name, value, currentOptions) {
        // 先调用父类的处理方法
        super.handleAttributeChange(name, value, currentOptions);

        // 处理柱状图特有属性
        switch (name) {
            // 柱子宽度相关
            case 'series-bar-width_number':
                this.updateBarWidth(parseInt(value), currentOptions);
                break;
            case 'series-bar-max-width_number':
                this.updateBarMaxWidth(parseInt(value), currentOptions);
                break;
            case 'series-bar-min-width_number':
                this.updateBarMinWidth(parseInt(value), currentOptions);
                break;

            // 柱子间距
            case 'series-bar-category-gap_number':
                this.updateBarCategoryGap(value, currentOptions);
                break;

            // 柱子样式
            case 'series-bar-item-style-color_colorpicker':
                this.updateBarColor(value, currentOptions);
                break;
            case 'series-bar-border-radius_number':
                this.updateBarBorderRadius(parseInt(value), currentOptions);
                break;

            // 堆叠配置
            case 'series-bar-stack_text':
                this.updateBarStack(value, currentOptions);
                break;

            // 标签配置
            case 'series-bar-label-show_radio':
                this.updateBarLabelShow(value === 'true', currentOptions);
                break;
            case 'series-bar-label-position_select':
                this.updateBarLabelPosition(value, currentOptions);
                break;
            case 'series-bar-label-color_colorpicker':
                this.updateBarLabelColor(value, currentOptions);
                break;
            case 'series-bar-label-fontsize_number':
                this.updateBarLabelFontSize(parseInt(value), currentOptions);
                break;
            case 'series-itemstyle-borderradius_slider':
                this.updateSeriesItemStyleBorderRadius(value, currentOptions);
                break;
            case 'series-barmaxwidth_slider':
                this.updateSeriesBarMaxWidth(value, currentOptions);
                break;
            case 'series-barminwidth_slider':
                this.updateSeriesBarMinWidth(value, currentOptions);
                break;

        }
    }
    // 柱状图系列最小宽度更新方法
    updateSeriesBarMinWidth(value, currentOptions) {
        // 检查当前配置中是否存在系列数组
        if (currentOptions.series) {
            // 遍历所有系列项，设置柱状图最小宽度
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};

                // 设置柱状图最小宽度（转换为整数，符合ECharts数值类型要求）
                currentOptions.series[index].barMinWidth = value.includes('%') ? value : `${value}%`;
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    // 系列柱状图最大宽度更新方法
    updateSeriesBarMaxWidth(value, currentOptions) {
        // 检查当前配置中是否存在系列配置
        if (currentOptions.series) {
            // 遍历所有系列项，设置柱状图最大宽度
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};

                // 设置柱状图最大宽度（转换为整数）
                currentOptions.series[index].barMaxWidth =value.includes('%') ? value : `${value}%`;
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }

    // 系列项样式边框半径更新方法
    updateSeriesItemStyleBorderRadius(value, currentOptions) {
        // 检查当前配置中是否存在系列配置
        if (currentOptions.series) {
            // 处理系列数组，为每个系列项设置边框半径
            currentOptions.series.forEach((seriesItem, index) => {
                // 确保系列项配置存在
                currentOptions.series[index] = currentOptions.series[index] || {};
                // 确保itemStyle对象存在
                currentOptions.series[index].itemStyle = currentOptions.series[index].itemStyle || {};

                // 设置边框半径（转换为整数）
                currentOptions.series[index].itemStyle.borderRadius = parseInt(value, 10);
            });

            // 应用更新后的配置到图表
            this.chart.setOption(currentOptions);
        }
    }
    // 更新柱子宽度
    updateBarWidth(width, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barWidth = width;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子最大宽度
    updateBarMaxWidth(maxWidth, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barMaxWidth = maxWidth;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子最小宽度
    updateBarMinWidth(minWidth, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barMinWidth = minWidth;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新类目间距
    updateBarCategoryGap(gap, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.barCategoryGap = `${gap}%`;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子颜色
    updateBarColor(color, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.color = color;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新柱子圆角
    updateBarBorderRadius(radius, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.itemStyle = series.itemStyle || {};
                    series.itemStyle.borderRadius = radius;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新堆叠配置
    updateBarStack(stackName, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.stack = stackName || '';
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新标签显示状态
    updateBarLabelShow(show, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.label = series.label || {};
                    series.label.show = show;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新标签位置
    updateBarLabelPosition(position, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.label = series.label || {};
                    series.label.position = position;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新标签颜色
    updateBarLabelColor(color, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.label = series.label || {};
                    series.label.color = color;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }

    // 更新标签字体大小
    updateBarLabelFontSize(fontSize, currentOptions) {
        if (currentOptions.series && Array.isArray(currentOptions.series)) {
            currentOptions.series.forEach(series => {
                if (series.type === 'bar') {
                    series.label = series.label || {};
                    series.label.fontSize = fontSize;
                }
            });
            this.chart.setOption(currentOptions);
        }
    }
}

// 注册自定义元素
customElements.define('basic-bar-chart', BasicBarChart);
